axios.get('http://localhost:3000/toplist/detail')
    .then(async function (res) {
        buildLists(res);
    })
    .catch(function (error) {
        console.log(error);
    });

function buildLists(res) {
    let official_lists = document.querySelector('.official-lists');
    let other_lists = document.querySelector('.other-lists');
    let inner1 = '';
    let inner2 = '';
    for (let i = 0; i < 4; i++) {
        inner1 = inner1 + `<div onclick="jumpPlayListInfo(${res.data['list'][i]['id']},${res.data['list'][i]['id']})" class="col-12 bg-secondary text-white rounded-3 p-2 mb-2">
                            <div class="my-1">
                                <span class="list_m-name text-start mx-3">${res.data['list'][i]['name']}</span>
                                <span class="list_m-updateFrequency mx-2">${res.data['list'][i]['updateFrequency']}</span>
                            </div>
                            <div class="d-flex flex-row my-1">
                            <div class="office-list_m-box-cov">
                                <img class="rounded office-list_m-cov mx-2" src="${res.data['list'][i]['coverImgUrl']}" alt="">
                            </div>
                                <div class="mx-2 text-start">
                                    <div>${limitLength(res.data['list'][i]['tracks'][0], 1)}</div>
                                    <div>${limitLength(res.data['list'][i]['tracks'][1], 2)}</div>
                                    <div>${limitLength(res.data['list'][i]['tracks'][2], 3)}</div>
                                </div>
                            </div>
                        </div>`;
    }
    official_lists.innerHTML = inner1;
    inner1 = null;
    for (let i = 4; i < res.data['list'].length; i++) {
        inner2 = inner2 + ` <div onclick="jumpPlayListInfo(${res.data['list'][i]['id']},${res.data['list'][i]['id']})"  class="col-4 global_m-list mb-2 ">
                            <img class="rounded-3" src="${res.data['list'][i]['coverImgUrl']}" alt="">
                            <div class="text-center global_m-list-updateFrequency px-2">${res.data['list'][i]['updateFrequency']}</div>
                        </div>`;
    }
    other_lists.innerHTML = inner2;
    inner2 = null;
}

function limitLength(track, index) {
    let song = index + ' ' + track['first'] + ' - ' + track['second'];
    if (song.length > 20) {
        song = song.substring(0, 20) + '...';
    }
    return song;
}
